<template>
  <div class="emergency-report-container">
    <el-card class="box-card" shadow="hover">
      <el-form 
        ref="reportForm" 
        :model="form" 
        :rules="rules" 
        label-width="120px"
        label-position="top"
      >
        <!-- 事件基本信息 -->
        <el-divider content-position="left">事件基本信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="事件类型" prop="eventType">
              <el-select 
                v-model="form.eventType" 
                placeholder="请选择事件类型"
                clearable
              >
                <el-option
                  v-for="item in eventTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急程度" prop="urgencyLevel">
              <el-radio-group v-model="form.urgencyLevel">
                <el-radio-button label="1">一般</el-radio-button>
                <el-radio-button label="2">紧急</el-radio-button>
                <el-radio-button label="3">非常紧急</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发生时间" prop="occurTime">
              <el-date-picker
                v-model="form.occurTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上报人" prop="reporter">
              <el-input v-model="form.reporter" placeholder="请输入上报人姓名" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 事件详情 -->
        <el-divider content-position="left">事件详情</el-divider>
        <el-form-item label="事件描述" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            :rows="4"
            placeholder="请详细描述事件情况（时间、地点、经过等）"
            maxlength="500"
            show-word-limit
          />
        </el-form-item>

        <!-- 上传附件 -->
        <el-divider content-position="left">现场资料</el-divider>
        <el-form-item label="上传附件">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="handleFileChange"
            :on-remove="handleFileRemove"
            :file-list="fileList"
            multiple
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <div class="el-upload__tip">
            支持上传图片、视频等文件（单个文件不超过10MB）
          </div>
        </el-form-item>

        <!-- 处理意见 -->
        <el-divider content-position="left">初步处理</el-divider>
        <el-form-item label="初步处理意见" prop="suggestion">
          <el-input
            v-model="form.suggestion"
            type="textarea"
            :rows="3"
            placeholder="请输入初步处理意见（如有）"
          />
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button 
            type="primary" 
            @click="submitForm"
            :loading="submitting"
          >
            立即上报
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 表单数据
const form = reactive({
  eventType: '',
  urgencyLevel: '2',
  occurTime: '',
  reporter: '',
  description: '',
  suggestion: ''
})

// 表单验证规则
const rules = reactive({
  eventType: [
    { required: true, message: '请选择事件类型', trigger: 'change' }
  ],
  urgencyLevel: [
    { required: true, message: '请选择紧急程度', trigger: 'change' }
  ],
  occurTime: [
    { required: true, message: '请选择发生时间', trigger: 'change' }
  ],
  reporter: [
    { required: true, message: '请输入上报人姓名', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入事件描述', trigger: 'blur' },
    { min: 10, message: '描述不能少于10个字符', trigger: 'blur' }
  ]
})

// 事件类型选项
const eventTypes = ref([
  { value: '1', label: '自然灾害' },
  { value: '2', label: '公共卫生' },
  { value: '3', label: '安全事故' },
  { value: '4', label: '社会治安' },
  { value: '5', label: '其他事件' }
])

// 文件上传相关
const fileList = ref([])
const handleFileChange = (file) => {
  console.log('文件添加:', file)
  fileList.value.push(file)
}
const handleFileRemove = (file) => {
  console.log('文件移除:', file)
  fileList.value = fileList.value.filter(item => item.uid !== file.uid)
}

// 提交状态
const submitting = ref(false)
const reportForm = ref(null)

// 提交表单
const submitForm = () => {
  reportForm.value.validate((valid) => {
    if (valid) {
      submitting.value = true
      console.log('表单数据:', JSON.parse(JSON.stringify(form)))
      console.log('上传文件列表:', fileList.value)
      
      // 模拟API调用
      setTimeout(() => {
        ElMessage.success('事件上报成功！')
        submitting.value = false
        resetForm()
      }, 1500)
    } else {
      ElMessage.warning('请填写完整信息')
      return false
    }
  })
}

// 重置表单
const resetForm = () => {
  reportForm.value.resetFields()
  fileList.value = []
}

// 静态事件数据
const eventList = ref([
  {
    id: 1,
    eventType: '1',
    urgencyLevel: '3',
    description: '社区东侧发生小型火灾，已初步控制',
    occurTime: '2025-01-10 14:30:00',
    status: '1'
  },
  {
    id: 2,
    eventType: '2',
    urgencyLevel: '2',
    description: '3栋2单元有居民出现发热症状',
    occurTime: '2025-02-09 09:15:00',
    status: '0'
  },
  {
    id: 3,
    eventType: '3',
    urgencyLevel: '1',
    description: '地下车库入口处地面塌陷',
    occurTime: '2023-05-08 18:45:00',
    status: '0'
  }
])

// 辅助函数
const getEventTypeName = (type) => {
  const item = eventTypes.value.find(item => item.value === type)
  return item ? item.label : '未知类型'
}

const getEventTypeTag = (type) => {
  const map = { '1': 'danger', '2': 'warning', '3': '', '4': 'info', '5': '' }
  return map[type] || ''
}

const getUrgencyName = (level) => {
  const map = { '1': '一般', '2': '紧急', '3': '非常紧急' }
  return map[level] || '未知'
}

const getUrgencyTag = (level) => {
  const map = { '1': '', '2': 'warning', '3': 'danger' }
  return map[level] || ''
}

// 事件操作函数
const viewDetail = (row) => {
  console.log('查看详情:', row)
  ElMessageBox.alert(`
    <div>
      <p><strong>事件类型：</strong>${getEventTypeName(row.eventType)}</p>
      <p><strong>紧急程度：</strong>${getUrgencyName(row.urgencyLevel)}</p>
      <p><strong>发生时间：</strong>${row.occurTime}</p>
      <p><strong>事件描述：</strong>${row.description}</p>
    </div>
  `, '事件详情', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确定'
  })
}

const deleteEvent = (id) => {
  console.log('删除事件:', id)
  ElMessageBox.confirm('确定删除该事件记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    eventList.value = eventList.value.filter(item => item.id !== id)
    ElMessage.success('删除成功')
  }).catch(() => {
    console.log('取消删除')
  })
}
</script>

<style scoped>
.emergency-report-container {
  padding: 20px;
}
.box-card {
  margin-bottom: 20px;
}
.mt-20 {
  margin-top: 20px;
}
.el-divider {
  margin: 20px 0;
}
</style>